
(function ($) {
    class Builder {
        static defaults = {
            min: 100, // 初始数值
            max: 150, // 最大数字  
            time: 60000, // 时长
            len: 6, // 数字是几位数
            width: 120, // 宽度
            height: 170, // 高度
            fontSize: 120, // 字体大小
            margin: 5, // 字体间距
            color: '#fedec2', // 字体颜色
            background: '#e38538' // 背景颜色
        }

        min = 0; // 补全后最小值字符串
        max = 0; // 补全后最大值字符串

        constructor(ele, options) {
            this.$ele = ele;
            this.opts = $.extend({}, Builder.defaults, options);
        }
        init() {
            const minStr = this.opts.min.toString(); // 最小值字符串
            const maxStr = this.opts.max.toString(); // 最大值字符串
            const container = $('<div class="statistics-container"></div>');

            if (maxStr.length <= this.opts.len) {
                this.min = minStr.padStart(this.opts.len, '0');
                this.max = maxStr.padStart(this.opts.len, '0');

                this.$ele.html('');
                let _this = this;
                $.each(this.min.split(''), function (index, value) {
                    let item = $('<div class="statistics"></div>');
                    for (let i = 0; i <= 9; i++) {
                        let numberHtml = `<div class="statistics-item">
                                                <div class="statistics-item-top">
                                                    <span>${i}</span>
                                                </div>
                                                <div class="statistics-item-bottom">
                                                    <span>${i}</span>
                                                </div>
                                            </div>`;
                        item.append($(numberHtml));
                    }
                    if (value == 0) {
                        item.find('.statistics-item').eq(0).addClass('active');
                        item.find('.statistics-item').eq(9).addClass('previous');
                    } else {
                        const val = Number(value);
                        item.find('.statistics-item').eq(val).addClass('active');
                        item.find('.statistics-item').eq(val - 1).addClass('previous');
                    }
                    container.append(item);
                })
                _this.$ele.append(container);
            }

            const times = this.opts.max - this.opts.min; // 动画执行次数
            const itemTime = this.opts.time / times; // 每次执行动画时间
            this.initCss();
            this.runAnimate(times, itemTime);
        }
        // 初始化样式
        initCss() {
            const _this = this;
            $('.statistics').css({ 'width': _this.opts.width + 'px', 'height': _this.opts.height + 'px', 'line-height': _this.opts.height + 'px', 'margin': '0 5px', 'font-size': _this.opts.fontSize + 'px', color: _this.opts.color });
            $('.statistics-item').css('background-color', _this.opts.background);
            $('.statistics-item-top').css({ 'background-color': _this.opts.background, 'border-bottom-color': _this.opts.background });
            $('.statistics-item-bottom').css({ 'background-color': _this.opts.background, 'border-bottom-color': _this.opts.background });
        }
        // 最后一位数字动画
        runAnimate(times, itemTime) {
            let _this = this;
            const lastElement = $('.statistics').last();
            const prev = lastElement.find('.previous');
            const current = lastElement.find('.active');

            if (times < 1) {
                return false;
            }
            times--;

            prev.removeClass('previous');
            current.removeClass('active').addClass('previous');

            if (current.next().length == 0) {
                lastElement.find('.statistics-item:first-child').addClass('active');
                this.prevNumberAnimate(lastElement.prev()); // 前一位数
            } else {
                current.next().addClass('active');
            }

            setTimeout(() => {
                _this.runAnimate(times, itemTime);
            }, itemTime);
        }
        // 前一位数字动画
        prevNumberAnimate(prevNumberElement) {
            const current = prevNumberElement.find('.active');
            const prev = prevNumberElement.find('.previous');

            prev.removeClass('previous');
            current.removeClass('active').addClass('previous');

            if (current.next().length == 0) {
                prevNumberElement.find('.statistics-item:first-child').addClass('active');
                const nextPrevElement = prevNumberElement.prev();
                if (nextPrevElement.length > 0) {
                    this.prevNumberAnimate(nextPrevElement);
                }
            } else {
                current.next().addClass('active');
            }
        }
    }
    $.fn.statisticsAnimate = function (options) {
        var builder = new Builder(this, options);
        return builder.init();;
    }
})(jQuery);
